<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-05-12 08:38:02
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-08-15 13:46:48
 * @FilePath: /amap-web-vr/src/components/vr-collect-drawer/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>  
    <div class="drawer">
        <el-drawer v-model="drawer" :destroy-on-close="destroy" direction='ltr' :size="size">
              <template #header="{}">
                <slot name="header">
                     <span class="title">{{title}}</span>
                </slot>
            </template>
             <slot />
        </el-drawer>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, defineExpose,defineProps} from 'vue'
defineProps({
    destroy:{
      type:Boolean,
      default:true
    },
    title:{
        type:String,
        default:'全景收藏列表'
    },
    size:{
        type:String,
        default:'33%'
    }
})
const drawer = ref(false)
const open = () => {
    drawer.value = true
}
defineExpose({open})

</script>

<style scoped lang='scss'>
.drawer{
  :deep(.el-drawer){
    .el-drawer__title {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
      margin-bottom: 0;
    }
    .el-drawer__header {
      margin-bottom: 0;
      padding: 10px;
    }
    .el-drawer__body{
      padding: 10px 10px;
    }
  }
  .title{
    font-size: 17px;
    color: #000000;
    font-weight: bold;
  }
  
  
}


</style>
  